<template>
  <div class="person">
    <ul>
      <li v-for="person in persions" :key="person.id">{{ person.name }}--{{ person.age }}</li>
    </ul>
    <button @click="increaseAge">第一个人的年龄+1</button>
  </div>
</template>

<script lang="ts" setup>
import { type IPersonList } from '@/types'
import { ref, reactive, withDefaults } from 'vue'
// 接收 persions ，并限制其类型为 IPersonList
// x后的?表示非必传
// withDefaults 在 defineProps 基础上指定默认值
let props = withDefaults(defineProps<{ persions: IPersonList; x?: number; y?: string }>(), {
  y: () => 'y的默认值',
})
// defineProps 为宏函数，无需引入，TS 中以 define 开头的基本都是宏函数

function increaseAge() {
  props.persions[0].age += 1
}

let persionList = reactive<IPersonList>([
  { id: '127', name: '赵武', age: 49 },
  { id: '227', name: '孙七', age: 74, x: 2 },
])

let xTag = ref(9)
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
}
button {
  margin: 5px 5px;
}
</style>
